<template>
  <div>
    <div ref="radar" style="width: 100%; height: 380px" />
  </div>
</template>

<script>
// 导入 echarts
import * as echarts from "echarts";

export default {
  mounted() {
    this.echartInit();
  },
  methods: {
    echartInit() {
      const myChart = echarts.init(this.$refs.radar);
      //   图标自适应
      window.onresize = function () {
        myChart.resize();
      };
      const option = {
        color: ["#ffb34c"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          top: "0%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        //   去掉x轴千位数的逗号
          axisLabel: {
            formatter: function (value) {
              return value + "";
            },
          },
        },
        yAxis: {
          type: "category",
          data: [
            "防火墙关键策略发生变化",
            "应用协议异常访问",
            "终端长期未上线",
            "网络中接入未登记设备",
            "3C",
          ],
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#2F343E;", //Y轴内容文字颜色
            },
          },
          //   y轴坐标轴的配置
          axisLine: {
            show: true,
            lineStyle: {
              color: "#d2d2d3", //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
              width: 1, //y轴线的宽度
              type: "solid", //y轴线为实线
            },
          },
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
              // 渐变色
               itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#F47422",
                  },
                  {
                    offset: 1,
                    color: "#FFAA2D",
                  },
                ]),
              },
            },
            emphasis: {
              focus: "series",
            },
            data: [480, 750, 1300, 1700, 1900],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
